Getting Started |
您所在的位置：网站首页 › view routes › Getting Started |
Getting Started
|
Getting Started Watch a Free Vue Router Video Course Creating a Single-page Application with Vue + Vue Router feels natural: with Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example: HTML html Hello App! Go to Home Go to About Hello App! Go to Home Go to About router-link Note how instead of using regular a tags, we use a custom component router-link to create links. This allows Vue Router to change the URL without reloading the page, handle URL generation as well as its encoding. We will see later how to benefit from these features. router-view router-view will display the component that corresponds to the URL. You can put it anywhere to adapt it to your layout.  Get the Vue Router Cheat Sheet from Vue Mastery JavaScript js// 1. Define route components.
// These can be imported from other files
const Home = { template: 'Home' }
const About = { template: 'About' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
// Now the app has started!// 1. Define route components.
// These can be imported from other files
const Home = { template: 'Home' }
const About = { template: 'About' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
// Now the app has started!By calling app.use(router), we are triggering the initial navigation and giving access to this.$router as well as the current route as this.$route inside of any component: js// Home.vue export default { computed: { username() { // We will see what `params` is shortly return this.$route.params.username }, }, methods: { goToDashboard() { if (isAuthenticated) { this.$router.push('/dashboard') } else { this.$router.push('/login') } }, }, }// Home.vue export default { computed: { username() { // We will see what `params` is shortly return this.$route.params.username }, }, methods: { goToDashboard() { if (isAuthenticated) { this.$router.push('/dashboard') } else { this.$router.push('/login') } }, }, }To access the router or the route inside the setup function, call the useRouter or useRoute functions. We will learn more about this in the Composition API Throughout the docs, we will often use the router instance. Keep in mind that this.$router is exactly the same as directly using the router instance created through createRouter. The reason we use this.$router is because we don't want to import the router in every single component that needs to manipulate routing. |
【本文地址】